<template>
  <div class="app-container" v-loading="loading">
    <el-form :inline="true" :model="queryParams">
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.receiptCode" placeholder="入库单号" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select
                clearable
                placeholder="状态"
                style="width: 100%"
                v-model="queryParams.status"
            >
              <template v-for="(item,index) in receipt_status" :key="index">
                <el-option :label="item.label" :value="item.value"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.purchaseCode" placeholder="关联采购订单号" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select
                clearable
                placeholder="订单类型"
                style="width: 100%"
                v-model="queryParams.receiptType"
            >
              <template v-for="(item,index) in receipt_type" :key="index">
                <el-option :label="item.label" :value="item.value"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select v-model="queryParams.warehouseId" style="width: 100%" clearable placeholder="入库仓库">
              <el-option
                  v-for="item in warehouseList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>

          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.vendorName" placeholder="供应商" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.vendorCode" placeholder="供应商编码" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.createByName" placeholder="创建人" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
                style="width:100%"
                v-model="timeData"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                range-separator="-"
                type="datetimerange"
                value-format="YYYY-MM-DD HH:mm:ss"

                unlink-panels
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getList">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </div>
    </el-form>
    <div>
      <el-button type="primary" @click="clickAdd" v-hasPermi="['storage:receipt:save']">新建其他入库单</el-button>
      <el-button type="primary">导出</el-button>
      <el-button type="primary" @click="clickPrint">打印入库单</el-button>
    </div>
    <vxe-table
        ref="tableRef"
        border
        style="margin-top: 10px;"
        align="center"
        :data="tableList"
        :height="tableHeight"
        :checkbox-config="{ checkMethod:visibleMethod,trigger:'row'}"
        :row-config="{isCurrent: true, isHover: true}"
    >
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column type="seq" width="80" title="序号"></vxe-column>
      <vxe-column field="status" width="120"  title="状态">
        <template v-slot="{row}">
          {{ returnDictLabel(receipt_status, row.status) }}
        </template>
      </vxe-column>
      <vxe-column field="receiptCode" width="200" title="入库单号"></vxe-column>
      <vxe-column field="purchaseCode" width="200" title="关联采购订单号"></vxe-column>
      <vxe-column field="receiptType" width="150"  title="订单类型">
        <template v-slot="{row}">
          {{ returnDictLabel(receipt_type, row.receiptType) }}
        </template>
      </vxe-column>
      <vxe-column field="companyName"  width="150" title="公司名称" ></vxe-column>
      <vxe-column field="warehouseName" width="150"  title="入库仓库"></vxe-column>
      <vxe-column field="totalNum" width="100" title="待收货数量"> </vxe-column>
      <vxe-column field="vendorCode" width="150" title="供应商编码"></vxe-column>
      <vxe-column field="vendorName" width="120" title="供应商"></vxe-column>
      <vxe-column field="remark" width="200" title="备注"></vxe-column>
      <vxe-column field="createByName" width="150" title="创建人"></vxe-column>
      <vxe-column field="createTime" width="200" title="创建时间"></vxe-column>

      <vxe-column fixed="right" width="200" title="操作">
        <template #default="{row}">
<!--          <el-button type="text" @click="clickEdit(row)">编辑</el-button>-->
          <el-button type="text" style="color:green" @click="clickView(row)">查看</el-button>
        </template>
      </vxe-column>

    </vxe-table>
    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

    <EditOtherInStorage v-if="isShowDialog" :title="title" :isShowDialog="isShowDialog"
                        :detailData="detailData" :isView="isView"
                        @cancel="handleClose"></EditOtherInStorage>

<!--    打印-->
    <PrintInstorage v-if="isShowPrint" :isShowPrint="isShowPrint" :printData="printData" @cancel="handleClosePrint"></PrintInstorage>
  </div>

</template>

<script setup>
import {nextTick, onMounted, reactive, ref} from "vue";
import EditOtherInStorage from "@/views/inStorage/b2bInStorage/component/editOtherInStorage.vue";
import {getB2bReceiptDetail, getB2bReceiptList, getB2bReceiptPrint, warehouseGetFilter} from "@/api/scApi";
import PrintInstorage from "@/views/inStorage/b2bInStorage/component/printInstorage.vue";

const { proxy } = getCurrentInstance()

const { receipt_status,receipt_type } = proxy.useDict("receipt_status","receipt_type");

const queryParams = ref({
  user: '',
  region: '',
  date: '',
  pageNum: 1,
  pageSize: 10
})
let total = ref(0)
let isView=ref(false)
let detailData=ref({})

let timeData=ref([])
let loading=ref(false)
let tableHeight = ref(0);
nextTick(() => {
  tableHeight.value = window.innerHeight - 350;
})
window.onresize = () => {
  tableHeight.value = document.body.scrollHeight - 350;
}

onMounted(() => {
  getWarehouseFilter()
  getList()
})

let tableList = ref([])

function getList() {
  loading.value =true
  queryParams.value.startTime=timeData.value[0]
  queryParams.value.endTime=timeData.value[1]
  getB2bReceiptList({
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    param: queryParams.value
  }).then(res => {
    loading.value =false
    if (res.code === 200) {
      tableList.value = res.data
      total.value=res.total
    }
  }).finally(()=>{
    loading.value = false
  })
}

const resetQuery = () => {
  timeData.value=[]
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
  }
  getList();
};

let isShowDialog = ref(false)
let title = ref("")

function clickAdd() {
  title.value = "新增其他入库单"
  isShowDialog.value = true
}

function clickEdit(row){
  title.value = "编辑其他入库单"
  getDetailData(row.receiptId)
}

function clickView(row) {
  isView.value =true
  title.value = "查看其他入库单"
  getDetailData(row.receiptId)
}

function getDetailData(id) {
  getB2bReceiptDetail(id).then(res => {
    if (res.code === 200) {
      detailData.value = res.data
      isShowDialog.value = true
    }
  })
}


//获取仓库
let warehouseList = ref([])

function getWarehouseFilter() {
  warehouseGetFilter({
    status: 0
  }).then(res => {
    if (res.code === 200) {
      warehouseList.value = res.data.map(item => {
        item.value = item.warehouseId
        item.label = item.warehouseName
        return item
      })

    }
  })
}

function handleClose(isReload) {
  isShowDialog.value = false;
  isView.value=false
  detailData.value={}
  if (isReload) {
    getList()
  }
}

//是否显示复选框
function visibleMethod({row}) {
  return row.status == '0'
}

let isShowPrint=ref(false)
let printData=ref([])
function clickPrint(){

  const $table = proxy.$refs.tableRef
  if ($table) {
    const selectRecords = $table.getCheckboxRecords()
    if(selectRecords.length>0){
      let ids = selectRecords.map(item => item.receiptId)
      getB2bReceiptPrint({receiptIds:ids}).then(res=>{
        isShowPrint.value=true
        printData.value =res.data
      })
    }else{
      proxy.$modal.msgWarning("请先选择数据!")
    }

  }

}

function handleClosePrint(){
  isShowPrint.value =false
}
</script>

<style scoped lang="scss">
.el-form-item {
  width: 90%;
}
</style>